<!doctype html>
<html><head>
	<meta charset="utf-8">
	<title>[(${dto.menu.title})]</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">

	<!-- jQuery-->
	<script type="text/javascript" src="/static/plugins/jquery/jquery-3.6.0.min.js"></script>

	<!-- layui-->
	<link rel="stylesheet" href="/static/plugins/layui/2.7.6/css/layui.css" media="all">
	<script src="/static/plugins/layui/2.7.6/layui.js" charset="utf-8"></script>

	<!-- common -->
	<link rel="stylesheet" href="/static/admin/css/common.css" media="all" />
	<script type="text/javascript" src="/static/admin/js/common-grid.js?v=c"></script>
	<link rel="stylesheet" href="/static/admin/css/mini-ease.css" media="all" />

	<!-- iconfont -->
	<link rel="stylesheet" href="/static/css/icon/iconfont.css" media="all" />

</head>
<body style="padding: 10px 0 0 10px;">

<div class="layui-row layui-col-space5" style="width:100%;">
	<!-- 左边面板【start】 -->
	<div class="layui-col-md10" id="id_panel_left_grid">
		<div class="layui-panel" style="overflow: auto; padding-top: 0.2rem;">
			<div class="mid-content">

				<table class="layui-hide" id="main_table" lay-filter="main_table"></table>

				<script type="text/html" id="toolbarDemo">
					<div class="layui-btn-container">
						<a th:each="button : ${dto.toolbar.buttonArr}" class="layui-btn layui-btn-normal layui-btn-xs" th:lay-event="${button.event}"><i class="iconfont" th:classappend="${button.icon}"></i>[(${button.name})]</a>
					</div>
				</script>


				<script type="text/html" id="templet_index_no">
					{{d.LAY_TABLE_INDEX+1}}
				</script>
				<!-- 加载TPL语法模板 -->
				<script type="text/html" th:each="templet : ${dto.templetArr}" th:id="${templet.id}">
					[(${templet.code})]
				</script>

				<script type="text/html" id="templet_script_name">
					{{d.info}}
				</script>

				<script th:inline="javascript">
					layui
							.extend({optimizeSelectOption: '/static/plugins/layui/extends/optimizeSelectOption/optimizeSelectOption'})
							.use(['form', 'element', 'table', 'dropdown', 'optimizeSelectOption', 'util', 'laydate'], function(){
								var element = layui.element;
								var table = layui.table;
								var dropdown = layui.dropdown;
								var form = layui.form;
								var util = layui.util;
								var $ = layui.jquery;
								var laydate = layui.laydate;


								var colmsg = [(${dto.colGrids})];
								console.log('colmsg',colmsg);
								var colNew = [];
								for(var i=0;i<colmsg.length;i++){
									if(colmsg[i].field == 'workContent'){//工作内容

										var thisInfo ={
											title: '工作内容',
											field: 'workContent',
											width: '120',
											align: 'center',
											templet: function(d){
												// 返回模板内容
												return '<div class="layui-table-link" onclick="lookWorkContent('+ d.id + ')"><div style="float:left;width: 85%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">' + (d.workContent==undefined?'':d.workContent) + '   </div><div style="float:right;width: 15%;"><i class="iconfont icon-search" style="float: right;"></i></div></div>';
											}
										}
										colNew.push(thisInfo);
									}else {
										colNew.push(colmsg[i]);
									}
								}


								// 创建渲染实例
								table.render({
									elem: '#main_table'
									,url:'[(${dto.menu.pathGridRequest})]' // 此处为静态模拟数据，实际使用时需换成真实接口
									,toolbar: '#toolbarDemo'
									,defaultToolbar: ['filter', 'print', {
										title: '导出数据'
										,layEvent: 'LAYTABLE_EXPORT_DATA'
										,icon: 'layui-icon-export'
									}, {
										title: '刷新页面'
										,layEvent: 'LAYTABLE_REFRESH'
										,icon: 'layui-icon-refresh'
									}]
									,height: window.innerHeight - 40 // 最大高度减去其他容器已占有的高度差
									,limit : 20
									,limits : [20,50,200,500]
									,where: getConds()
									,cellMinWidth: 95
									//,totalRow: true // 开启合计行，true开启，false关闭
									,page: true
									,request: {
										pageName: 'page',
										limitName: 'size'
									}
									,skin: 'row'
									,even: true // 开启隔行背景
									,cols:[colNew]
									,done: function(res){
										console.log(res);
										var id = this.id;

										// 绑定查询按钮--表格重载成功后
										$('#id_filter_form_search').on('click', function(e){
											layui.table.reload("main_table",{
												page: {
													curr: 1
												},
												where: getConds()
											})
										});
									}
									,error: function(res, msg){
										console.log(res, msg)
									}
								});

								var indexSearchForm = 0;
								// 工具栏事件
								table.on('toolbar(main_table)', function(obj){
									var id = obj.config.id;
									var checkStatus = table.checkStatus(id);
									var othis = lay(this);
									switch(obj.event){
										case 'LAYTABLE_REFRESH':
										{
											layer.confirm("确定刷新吗？",{
												btn: ['确定', '取消']
											}, function (index) {
												location.reload();
												layer.close(index);
											});
											break;
										}
										case 'LAYTABLE_EXPORT_DATA':
										{
											$.ajax({
												type: "POST",
												url: '[(${dto.menu.pathGridExportRequest})]',
												data: getConds(),
												success: function (data) {
													if (data.code == 0) {
														if(data.msg != undefined && data.msg.startsWith('http')) {
															window.open(data.msg);
														} else {
															layer.msg(data.msg);
														}
													} else {
														alert(data.msg);
													}
												}
											});
											break;
										}
											[(${dto.toolbar.eventJS})]
									};
								});

								//触发单元格工具事件
								table.on('tool(main_table)', function(obj){ // 双击 toolDouble
									var data = obj.data;
									//console.log(obj)
									if(obj.event === 'del'){
										layer.confirm('真的删除行么', function(index){
											obj.del();
											layer.close(index);
										});
									} else if(obj.event === 'edit'){
										layer.open({
											title: '编辑',
											type: 1,
											area: ['80%','80%'],
											content: '<div style="padding: 16px;">自定义表单元素</div>'
										});
									}
									/*
                                    else if(obj.event === '_event_text_change_on_table'){
                                        $(this).on('change',function(e){
                                            var val = $(this).val();
                                            var name = $(this).attr('name');
                                            data[name] = val
                                            obj.update(data);//更新行对象数据
                                            layer.msg(val);
                                            console.log(obj + val);
                                        })
                                        return;
                                    }
                                    */
								});

								//触发表格复选框选择
								table.on('checkbox(main_table)', function(obj){
									console.log(obj)
								});

								//触发表格单选框选择
								table.on('radio(main_table)', function(obj){
									console.log(obj)
								});

								// 行单击事件
								table.on('row(main_table)', function(obj){

								});
								// 行双击事件
								table.on('rowDouble(main_table)', function(obj){
									lookDetail(obj.data.Id)
								});


								// 更新table的cache
								function modifyTableCacheBySwitch(data, value) {
									var table = layui.table;
									var switchElem = $(data.elem);
									var tdElem = switchElem.closest('td');
									var trElem = tdElem.closest('tr');
									var tableView = trElem.closest('.layui-table-view');
									table.cache[tableView.attr('lay-id')][trElem.data('index')][tdElem.data('field')] = value;

									var dataCommit = {};
									dataCommit['[(${dto.primaryKey})]'] = table.cache[tableView.attr('lay-id')][trElem.data('index')]['[(${dto.primaryKey})]'];
									dataCommit[tdElem.data('field')] = value;
									doEditOnTable(dataCommit);
								}

								// 清空按钮
								$('#id_filter_form_clear').on('click', function(e){
									layer.confirm("确定清空搜索条件吗？",{
										btn: ['确定', '取消']
									}, function (index) {
										$('form[name="searchForm"]').find('input[type=text],select').each(function() {
											$(this).val('');
										});
										layer.close(index);
									});
									return false;
								});
							});

					//详情
					function lookDetail(Id){
						var w=($(window).width()*0.8);
						var h=($(window).height() - 50);
						layer.open({
							title:'详情',
							type: 2,
							area: [w+'px', h +'px'],
							fix: true,
							maxmin: false,
							shadeClose: true,
							shade:0.4,shade:0.5,
							content:'/web/kefu/tpGaugeMaintenance/toDetail?Id=' + Id + ''});
					}

					//工作内容
					function lookWorkContent(id){
						var w=($(window).width()*0.8);
						var h=($(window).height() - 50);
						layer.open({
							title:'工作内容',
							type: 2,
							area: ['1200px', '700px'],
							fix: true,
							maxmin: false,
							shadeClose: true,
							shade:0.4,shade:0.5,
							content:'/web/kefu/tpGaugeMaintenance/toContent?id=' + id + ''});
					}

					$('body').on("mouseenter",".layui-table-body tr",function () {
						$(this).siblings().find("div").css("color","#142A48");
						$(this).find("div").css("color","#4DA1FF");
					})
				</script>
			</div>
		</div>
	</div>
	<!-- 左边面板【end】 -->

	<!-- 搜索面板【start】 -->
	<th:block th:include="include/search :: searchHTML"/>
	<th:block th:include="include/search :: searchJS"/>
	<!-- 搜索面板【end】 -->

</div>

<script type="text/javascript">
	$(function() {
		$('#id_panel_left_grid').css('height', (window.innerHeight - 40) + 'px');
	});
</script>
</body>

</html>